<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <title>gulimall注册页面</title>
    <script src="/register/libs/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
<!--    <script src="/register/js/jQuery/jquery-3.1.1.js"></script>-->
    <link rel="stylesheet" type="text/css" href="/register/bootStrap/bootstrap/css/bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="/register/sass/index.css"/>
    <link rel="stylesheet" type="text/css" href="/register/css/index.css">
</head>

<body>
<div id="app">
    <header>
        <a href="/register/https://www.jd.com/?cu=true&utm_source=haosou-pinzhuan&utm_medium=cpc&utm_campaign=t_288551095_haosoupinzhuan&utm_term=0a875d61c5fe47d8bc48679132932d23_0_2702c6f4ae1c4cd191c1ee4398e2e21b"
           class="logo"><img src="/register/img/logo1.jpg" alt=""></a>
        <div class="desc">欢迎注册</div>
        <div class="dfg">
            <span>已有账号？</span>
            <a href="/login.html">请登录</a>
        </div>
    </header>
    <section>
        <div class="one">
            <div class="register-box">
                <label for="username" class="username_label">用 户 名
                    <input v-model="form.username" id="username" maxlength="20" type="text" placeholder="您的用户名和登录名">
                </label>
                <div class="tips" style="color: red">{{error.username}}</div>
            </div>
            <div class="register-box">
                <label for="password" class="other_label">设 置 密 码
                    <input v-model="form.password" id="password" maxlength="20" type="password" placeholder="建议至少使用两种字符组合">
                </label>
                <div class="tips" style="color: red">{{error.password}}</div>
            </div>
            <div class="register-box">
                <label for="passwordVerify" class="other_label">确 认 密 码
                    <input v-model="form.passwordVerify" id="passwordVerify" maxlength="20" type="password" placeholder="请再次输入密码">
                </label>
                <div class="tips" style="color: red">{{error.password}}</div>
            </div>
            <div class="register-box">
                <label for="phone" class="other_label">
                    <span>中国 0086∨</span>
                    <input v-model="form.phone" id="phone" class="phone" maxlength="20" type="text" placeholder="建议使用常用手机">
                </label>
                <div class="tips" style="color: red">{{error.phone}}</div>
            </div>
            <div class="register-box">
                <label for="code" class="other_label">验 证 码
                    <input v-model="form.code" id="code" name="code" maxlength="20" type="text" placeholder="请输入验证码" class="caa">
                </label>
                <a v-if="hasSendCode" @click="sendCode">发送验证码</a>
                <a v-else>{{codeSecond}} 秒后再次发送</a>
                <div class="tips" style="color: red">
                    {{error.code}}
                </div>
            </div>
            <div class="arguement">
                <input type="checkbox" id="xieyi"> 阅读并同意
                <a href="/register/#">《谷粒商城用户注册协议》</a>
                <a href="/register/#">《隐私政策》</a>
                <div class="tips">

                </div>
                <br/>
                <div class="submit_btn">
                    <button type="button" id="submit_btn" @click="register">立 即 注 册</button>
                </div>
            </div>
        </div>
        <div class="two">
            <div class="right_r">
                <div class="right_r1">
                    <img src="/register/img/a65a18e877a16246a92e1b755bd88a03_03.png"/>
                    <span>企业用户注册</span>
                </div>
                <div class="right_r2">
                    <img src="/register/img/a65a18e877a16246a92e1b755bd88a03_06.png"/>
                    <span>INTERNATIONAL <br/> CUSTOMERS</span>
                </div>
            </div>
        </div>

    </section>
    <br/><br/>
    <hr>
    <div class="footer">
        <ul>
            <li>
                <a href="/register/">关于我们</a>
            </li>
            <li>|</li>
            <li>
                <a href="/register/">联系我们</a>
            </li>
            <li>|</li>
            <li>
                <a href="/register/">人次招聘</a>
            </li>
            <li>|</li>
            <li>
                <a href="/register/">商家入驻</a>
            </li>
            <li>|</li>
            <li>
                <a href="/register/">广告服务</a>
            </li>
            <li>|</li>
            <li>
                <a href="/register/">手机谷粒商城</a>
            </li>
            <li>|</li>
            <li>
                <a href="/register/">友情链接</a>
            </li>
            <li>|</li>
            <li>
                <a href="/register/">销售联盟</a>
            </li>
            <li>|</li>
            <li>
                <a href="/register/">谷粒商城社区</a>
            </li>
            <li>|</li>
            <li>
                <a href="/register/">谷粒商城公益</a>
            </li>
            <li>|</li>
            <li>
                <a href="/register/">English Site</a>
            </li>
        </ul>
    </div>
    <p class="bq">Copyright©2004-2016 谷粒商城gulimall.com 版权所有</p>
</div>


<script src="/common/axios.js"></script>
<script src="/common/vue.js"></script>
<script type="text/javascript" charset="utf-8">
    $(function () {
        var stuList = getStuList(); //设置传送信息：学生的集合

        // //聚焦失焦input
        // $('input').eq(0).focus(function () {
        //     if ($(this).val().length == 0) {
        //         $(this).parent().next("div").text("支持中文，字母，数字，'-'，'_'的多种组合");
        //     }
        // })
        // $('input').eq(1).focus(function () {
        //     if ($(this).val().length == 0) {
        //         $(this).parent().next("div").text("建议使用字母、数字和符号两种以上的组合，6-20个字符");
        //     }
        // })
        // $('input').eq(2).focus(function () {
        //     if ($(this).val().length == 0) {
        //         $(this).parent().next("div").text("请再次输入密码");
        //     }
        // })
        // $('input').eq(3).focus(function () {
        //     if ($(this).val().length == 0) {
        //         $(this).parent().next("div").text("验证完后，你可以使用该手机登陆和找回密码");
        //     }
        // })
        // $('input').eq(4).focus(function () {
        //     if ($(this).val().length == 0) {
        //         $(this).parent().next().next("div").text("看不清？点击图片更换验证码");
        //     }
        // })
        //input各种判断
        //用户名：
        // $('input').eq(0).blur(function () {
        //     if ($(this).val().length == 0) {
        //         $(this).parent().next("div").text("");
        //         $(this).parent().next("div").css("color", '#ccc');
        //     } else if ($(this).val().length > 0 && $(this).val().length < 4) {
        //         $(this).parent().next("div").text("长度只能在4-20个字符之间");
        //         $(this).parent().next("div").css("color", 'red');
        //     } else if ($(this).val().length >= 4 && !isNaN($(this).val())) {
        //         $(this).parent().next("div").text("用户名不能为纯数字");
        //         $(this).parent().next("div").css("color", 'red');
        //     } else {
        //         for (var m = 0; m < stuList.length; m++) {
        //             if ($(this).val() == stuList[m].name) {
        //                 $(this).parent().next("div").text("该用户名已被注册");
        //                 $(this).parent().next("div").css("color", 'red');
        //                 return;
        //             }
        //         }
        //         $(this).parent().next("div").text("");
        //     }
        // })
        // //密码
        // $('input').eq(1).blur(function () {
        //     if ($(this).val().length == 0) {
        //         $(this).parent().next("div").text("");
        //         $(this).parent().next("div").css("color", '#ccc');
        //     } else if ($(this).val().length > 0 && $(this).val().length < 6) {
        //         $(this).parent().next("div").text("长度只能在6-20个字符之间");
        //         $(this).parent().next("div").css("color", 'red');
        //     } else {
        //         $(this).parent().next("div").text("");
        //     }
        // })
        // //	确认密码
        // $('input').eq(2).blur(function () {
        //     if ($(this).val().length == 0) {
        //         $(this).parent().next("div").text("");
        //         $(this).parent().next("div").css("color", '#ccc');
        //     } else if ($(this).val() != $('input').eq(1).val()) {
        //         $(this).parent().next("div").text("两次密码不匹配");
        //         $(this).parent().next("div").css("color", 'red');
        //     } else {
        //         $(this).parent().next("div").text("");
        //     }
        // })
        // //	手机号
        // $('input').eq(3).blur(function () {
        //     if ($(this).val().length == 0) {
        //         $(this).parent().next("div").text("");
        //         $(this).parent().next("div").css("color", '#ccc');
        //     } else if ($(this).val().substr(0, 3) != 138 && $(this).val().substr(0, 3) != 189 && $(this).val().substr(0, 3) != 139 && $(this).val().substr(0, 3) != 158 && $(this).val().substr(0, 3) != 188 && $(this).val().substr(0, 3) != 157 || $(this).val().length != 11) {
        //         $(this).parent().next("div").text("手机号格式不正确");
        //         $(this).parent().next("div").css("color", 'red');
        //     } else {
        //         $(this).parent().next("div").text("");
        //     }
        // })
        // // 	验证码
        // //	 验证码刷新
        // function code() {
        //     var str = "qwertyuiopasdfghjklzxcvbnm1234567890QWERTYUIOPLKJHGFDSAZXCVBNM";
        //     var str1 = 0;
        //     for (var i = 0; i < 4; i++) {
        //         str1 += str.charAt(Math.floor(Math.random() * 62))
        //     }
        //     str1 = str1.substring(1)
        //     $("#code").text(str1);
        // }
        //
        // code();
        // $("#code").click(code);
        // //	验证码验证
        // $('input').eq(4).blur(function () {
        //     if ($(this).val().length == 0) {
        //         $(this).parent().next().next("div").text("");
        //         $(this).parent().next().next("div").css("color", '#ccc');
        //     } else if ($(this).val().toUpperCase() != $("#code").text().toUpperCase()) {
        //         $(this).parent().next().next("div").text("验证码不正确");
        //         $(this).parent().next().next("div").css("color", 'red');
        //     } else {
        //         $(this).parent().next().next("div").text("");
        //     }
        // })
        // //	提交按钮
        // $("#submit_btn").click(function (e) {
        //     for (var j = 0; j < 5; j++) {
        //         if ($('input').eq(j).val().length == 0) {
        //             $('input').eq(j).focus();
        //             if (j == 4) {
        //                 $('input').eq(j).parent().next().next("div").text("此处不能为空");
        //                 $('input').eq(j).parent().next().next("div").css("color", 'red');
        //                 e.preventDefault();
        //                 return;
        //             }
        //             $('input').eq(j).parent().next(".tips").text("此处不能为空");
        //             $('input').eq(j).parent().next(".tips").css("color", 'red');
        //             e.preventDefault();
        //             return;
        //         }
        //     }
        //     //协议
        //     if ($("#xieyi")[0].checked) {
        //         //向变量stuList数组添加一个数值，数值内部格式Student(name,password,tel,id)
        //         //发送用户信息
        //         stuList.push(new Student($('input').eq(0).val(), $('input').eq(1).val(), $('input').eq(3).val(), stuList.length + 1));
        //         localStorage.setItem('stuList', JSON.stringify(stuList));
        //         alert("注册成功");
        //         window.open("userlist.html", "_blank");
        //     } else {
        //         $("#xieyi").next().next().next(".tips").text("请勾选协议");
        //         $("#xieyi").next().next().next(".tips").css("color", 'red');
        //         e.preventDefault();
        //         return;
        //     }
        // })

        //  建立构造函数，构造学生信息模板
        // function Student(name, password, tel, id) {
        //     this.name = name;
        //     this.password = password;
        //     this.tel = tel;
        //     this.id = id;
        // }

        //	获取之前所有已经注册的用户集合
        // function getStuList() {
        //     var list = localStorage.getItem('stuList');
        //     if (list != null) {
        //         return JSON.parse(list);
        //     } else {
        //         return new Array();
        //     }
        // }

    })
    $(".ty").click(function () {
        console.log("hello")
        $(".zong").hide();
        $(".laoda").hide();
    });
    $(".cuo").click(function () {
        $(".zong").hide();
    });
</script>
<script>
    new Vue({
        el: '#app',
        data: {
            hasSendCode: true,
            codeSecond: 60,
            myInterval: null,
            form: {
                username: '',
                password: '',
                passwordVerify: '',
                phone: '',
                code: ''
            },
            error: {
                username: '',
                password: '',
                phone: '',
                code: ''
            }
        },
        methods: {
            /**
             * 发送验证码
             */
            sendCode() {
                // 检查一下
                let patrtter = /1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}/
                if (patrtter.test(this.form.phone)) {
                    axios({
                        url: '/user/sendCode?phone=' + this.form.phone,
                        method: 'get'
                    })
                    this.hasSendCode = false
                    this.myInterval = setInterval(() => {
                        if (this.codeSecond <= 0) {
                            clearInterval(this.myInterval)
                            this.myInterval = null
                            this.hasSendCode = true
                            this.codeSecond = 60
                        } else {
                            this.codeSecond--
                        }
                    }, 1000)
                }else {
                    this.error.phone = "请填写正确的手机号再发送验证码"
                }
            },
            /**
             * 注册请求
             */
            register() {
                axios({
                    url: '/user/register',
                    method: 'post',
                    data: {
                        username: this.form.username,
                        password: this.form.password,
                        phone: this.form.phone,
                        code: this.form.code
                    }
                }).then(({data}) => {
                    if (data.code !== 0) {
                        // 失败了
                        this.error = data.error
                        console.log("失败")
                    }else {
                        // 成功了
                        alert("注册成功")
                        // 跳转页面
                        location.href = 'http://auth.gulimall.com/'
                    }
                })
            }
        },
        created() {
        },
        computed: {}
    })
</script>
</body>

</html>
